<!DOCTYPE html>
 <html lang="en" style="width:100%;height:100%;">
 	<head>
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width">
 		<style>
 			* {
 				padding: 0;
 				margin: 0;
 			}

 			#ball {
 				width: 12px;
 				height: 12px;
 				background: #5EA345;
 				border-radius: 50%;
 				position: fixed;
 				transition: left 1s linear, top 1s ease-in;
 			}
 		</style>
 		<title>CSS3 水平抛物线动画</title>
 	</head>
 	<body style="width:100%;height:100%;">
 		<div id="ball"></div>
 	</body>
 	<script>
 		var $ball = document.getElementById('ball');
 		document.body.onclick = function(evt) {
 			console.log(evt.pageX, evt.pageY)
 			$ball.style.top = evt.pageY + 'px';
 			$ball.style.left = evt.pageX + 'px';
 			$ball.style.transition = 'left 0s, top 0s';
 			setTimeout(() => {
 				$ball.style.top = window.innerHeight + 'px';
 				$ball.style.left = '0px';
 				$ball.style.transition = 'left 1s linear, top 1s ease-in';
 			}, 20)
 		}
 	</script>
